<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加学校</title>
<link href="<%=request.getContextPath()%>/commonadmin/css/css.css"
	rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/commonadmin/css/bootstrap.min.css"
	rel="stylesheet" type="text/css" />
<link
	href="<%=request.getContextPath()%>/commonadmin/css/jquery.datetimepicker.css"
	rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/commonadmin/css/register.css">
<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/commonadmin/css/teacher_Theme.css">
	<script type="text/javascript"
	src="<%=request.getContextPath()%>/commonadmin/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/commonadmin/js/jquery.datetimepicker.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/commonadmin/js/imagecropper.js"></script>

<style type="text/css">
html, body {
	display: block;
	height: 100%
}

.pageCover {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5000000;
	width: 100%;
	height: 100%;
	background-color: #fff
}

.pageCover h1 {
	font-size: 30px;
	text-align: center;
	margin-top: 20px
}

.main_01 #label_1 {
	padding-top: 0;
	text-align: center
}

.main_01 img {
	width: 750px;
	margin: 0 auto
}

.user_banner {
	width: 400px;
	margin: 0 auto;
	height: 40px;
	line-height: 40px;
	background-color: #fcc300;
	color: #333;
	border: none
}

h1 {
	font-family: "微软雅黑";
	font-weight: normal;
	margin: 0;
}

.btn {
	display: inline-block;
	*display: inline;
	padding: 4px 12px;
	margin-bottom: 0;
	*margin-left: .3em;
	font-size: 14px;
	line-height: 20px;
	color: #333333;
	text-align: center;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
	vertical-align: middle;
	cursor: pointer;
	background-color: #f5f5f5;
	*background-color: #e6e6e6;
	background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff),
		to(#e6e6e6));
	background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
	background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
	background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
	background-repeat: repeat-x;
	border: 1px solid #cccccc;
	*border: 0;
	border-color: #e6e6e6 #e6e6e6 #bfbfbf;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	border-bottom-color: #b3b3b3;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',
		endColorstr='#ffe6e6e6', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	*zoom: 1;
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px
		rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px
		rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px
		rgba(0, 0, 0, 0.05);
}

.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled]
	{
	color: #333333;
	background-color: #e6e6e6;
	*background-color: #d9d9d9;
}

.btn:active, .btn.active {
	background-color: #cccccc \9;
}

.btn:first-child {
	*margin-left: 0;
}

.btn:hover, .btn:focus {
	color: #333333;
	text-decoration: none;
	background-position: 0 -15px;
	-webkit-transition: background-position 0.1s linear;
	-moz-transition: background-position 0.1s linear;
	-o-transition: background-position 0.1s linear;
	transition: background-position 0.1s linear;
}

.btn:focus {
	outline: thin dotted #333;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}

.btn.active, .btn:active {
	background-image: none;
	outline: 0;
	-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px
		rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px
		rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px
		rgba(0, 0, 0, 0.05);
}

.btn.disabled, .btn[disabled] {
	cursor: default;
	background-image: none;
	opacity: 0.65;
	filter: alpha(opacity = 65);
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

/*----上传图片----*/
#container {
	position: fixed;
	top: 0;
	left: 0;
	background-color: #eee;
	width: 100%;
	height: 100%;
	z-index: 9999999999999999999
}

#wrapper {
	position: absolute;
	left: 0px;
	top: 80px;
	left: 50%;
	margin-left: -375px
}

#cropper {
	position: absolute;
	left: 0px;
	top: 0px;
	border: 1px solid #ccc;
}

#previewContainer {
	position: absolute;
	left: 350px;
	top: 60px;
}

.preview {
	border: 1px solid #ccc;
}

#selectBtn {
	display: block;
	float: left;
	left: 0px;
	top: 0px;
	width: 100px;
	height: 27px;
	background-color: #fbc400;
	text-align: center;
	color: #333;
	border-radius: 5px;
	line-height: 27px;
}

#saveBtn {
	display: block;
	float: left;
	left: 150px;
	margin-left: 20px;
	top: 0px;
	width: 100px;
	height: 27px;
	background-color: #fbc400;
	text-align: center;
	color: #333;
	border-radius: 5px;
	line-height: 27px;
}

#rotateLeftBtn {
	position: absolute;
	left: 0px;
	top: 315px;
	width: 100px;
	height: 22px;
	padding-left: 25px;
	padding-top: 2px;
}

#rotateRightBtn {
	position: absolute;
	left: 225px;
	top: 315px;
	width: 150px;
	height: 22px;
	padding-right: 25px;
	padding-top: 2px;
}

.onBtn {
	margin-left: 250px;
	overflow: hidden;
	width: 250px;
	margin: 30px auto 0 auto
}
.episodes,.priceList{position:relative}
.episodes li{margin-bottom:15px}
.add_episodes,.add_priceNum{background-color:#fbc400;width:80px;height:25px;border-radius:5px;color:#333;text-align:center;line-height:25px;cursor:pointer;}
.delete_episodes,.delete_priceNum{display:none;position:absolute;left:520px;bottom:39px;width:25px;height:25px; background-color:#ccc;cursor: pointer;color:#333;text-align:center;line-height:25px;}
.delete_episodes{left:670px}
.priceList li{margin-bottom:15px}
.errortext{display:none;color:red}
</style>

</head>

<body onload="init();">
	<input value="" type="hidden" id="tap">
	<form action="<%=request.getContextPath()%>/admin/school/addSchool.htm"
		method="post">
		<div class="wrap" style="width:1000px">
			<h1 style="margin-bottom: 30px">添加学校</h1>
			<div class="form-group">
				<div class="left">学校名称</div>
				<div class="right">
					<input type="text" class="input oninput" name="name"> <span class="errortext">请填写学校名称</span>
				</div>
			</div>

			

		<input type="submit" value="添加" style="float: left; text-decoration: none; display: block; width: 100px; text-align: center; height: 32px; line-height: 32px; border-radius: 3px; color: #333; background-color: #ffcd00;" >

	</form>

<script>

//上传图片
$("#header").on("click",function(){
	$("#tap").val("1");
	$("#container").show();
})
function pageCover(){
	var banner_val=$("#idCardFrontImg").attr("src");
	$(".pageCover").hide();	
}
var cropper;

function init()
{   
    //绑定
    cropper = new ImageCropper(500, 500, 500, 500);
    cropper.setCanvas("cropper");
    cropper.addPreview("preview180");
    cropper.addPreview("preview100");
    cropper.addPreview("preview50");
    //检测用户浏览器是否支持imagecropper插件
    if(!cropper.isAvaiable())
    {
        alert("Sorry, your browser doesn't support FileReader, please use Firefox3.6+ or Chrome10+ to run it.");
    }
}

//打开本地图片
function selectImage(fileList)
{
    cropper.loadImage(fileList[0]);
    cropper1.loadImage(fileList[0]);
}

//旋转图片
function rotateImage(e)
{
    switch(e.target.id)
    {
        case "rotateLeftBtn":
            cropper.rotate(-90);
            break;
        case "rotateRightBtn":
            cropper.rotate(90);
            break;
    }
}

//上传头像图片
function saveImage()
{

    if($("#tap").val()==1){
    	//选个你需要的大小
        var imgData1 = cropper.getCroppedImageData(180, 180);
        var imgData=imgData1.replace(/^data:image\/(png|jpg);base64,/, "");
        console.log("上传了："+imgData);
    	$("#input").val("");
    	$("#header").attr("src",imgData1);
    	$("#img_header").val(imgData);
    	//上传头像
    	
    }
    
	console.log(imgData);
	$("#container").hide();
	$("#tap").val("");
    //在这里写你的上传代码
}


//上传banner

function setImagePreview(fileId, showImagesId) {  
	//toShowLoading();
	var preview, img_txt, localImag, file_head = document.getElementById(fileId),  
	picture = file_head.value;
	if(picture == ''){
		preview = document.getElementById(showImagesId);
		preview.src = "<%=basePath%>common/img/default.png";
	}
	if (!picture.match(/.jpg|.png|.bmp/i) && picture != '') return alert("您上传的图片格式不正确，请重新选择！"),  
	!1;  
	 
	if (preview = document.getElementById(showImagesId), file_head.files && file_head.files[0]){
			preview.style.display = "block",
            preview.style.height = $("#" + showImagesId).height() + "px",  
			preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ?  window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]); 
			var tmpCanvas = document.getElementById("canvas_tmp");
			var tmpContext = tmpCanvas.getContext("2d");
			var image = document.getElementById("idCardFrontImg");
			var reader = new FileReader();


			reader.onload = function(evt) {
				image.src = evt.target.result;
				var hideImg = document.getElementById("hideImg");
				hideImg.src = evt.target.result;				
				hideImg.onload = function(){
			        // canvas清屏  
			        tmpContext.clearRect(0, 0, tmpCanvas.width, tmpCanvas.height);  
			      
				    // 重置canvas宽高  	
			        tmpCanvas.width = hideImg.width;  
			        tmpCanvas.height = hideImg.height;
			        // 将图像绘制到canvas上  
			        tmpContext.drawImage(hideImg, 0, 0, hideImg.width, hideImg.height);
				    var Pic = document.getElementById("canvas_tmp").toDataURL("image/png");
					Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "");
				    
			    if(Pic!=undefined){
					$("#fixedAvatar").val(Pic);
						//toHideLoading();
					}
				}
			}
			reader.readAsDataURL(file_head.files[0]);
			
	}
}



$(".oninput").blur(function(){
	if($(this).val()==""){
		$(this).next("span").show();
		return;
	}else{
		$(this).next("span").hide();
	}
})
$(".oninput").focus(function(){
	if($(this).val()!=""){
		$(this).next("span").hide();
		return;
	}
})
</script>


</body>
</html>
